<template>
  <van-card
      v-for="team in prop.teamList"
      :desc="team.description"
      :title="team.name"
      :thumb="dragon"
  >
    <template #tags>
      <van-tag
          plain
          type="primary"
          style="margin-right: 8px;margin-bottom: 8px"
      >
        {{ team.status }}
      </van-tag>
    </template>
    <template #footer>
      <van-button
          v-if="team.createUserId !== user.id && !team.hasJoin"
          type="primary"
          plain
          size="small"
          @click="preJoinTeam(team)"
      >加入队伍
      </van-button>
      <van-button
          v-if="team.createUserId === user.id || user.status === 1"
          type="primary"
          plain
          size="small"
          @click="doUpdateTeam(team)"
      >修改队伍
      </van-button>
      <van-button
          v-if="team.createUserId !== user.id && team.hasJoin"
          type="primary"
          plain
          size="small"
          @click="quitTeam(team)"
      >退出队伍
      </van-button>
      <van-button
          v-if="team.createUserId === user.id && team.hasJoin"
          type="primary"
          plain
          size="small"
          @click="removeTeam(team)"
      >解散队伍
      </van-button>
    </template>
    <template #price>
      {{ `队伍人数: ${team?.userList ? team?.userList.length : 0}/${team.maxNum}` }}
    </template>
    <template #bottom>
      <div>
        {{ "过期时间: " + team.expireTime }}
      </div>
      <div>
        {{ "创建时间: " + team.createTime }}
      </div>
    </template>
  </van-card>

  <van-empty
      v-if="prop.teamList == null || prop.teamList === []"
      description="数据为空"/>
  <!-- 底部弹出 -->
  <van-popup
      v-model:show="showKeyboard"
      position="bottom"
      :style="{ height: '46%' }"
  >
    <van-password-input
        style="margin-top: 5px"
        :value="password"
        :length="4"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
    />
    <!-- 数字键盘 -->
    <van-number-keyboard
        v-model="password"
        :show="showKeyboard"
        @blur="showKeyboard = false"
    />
  </van-popup>
</template>

<script setup lang="ts">
import dragon from '../../assets/teamDefault.png'
import {onMounted, ref, watch} from "vue";
import {currentUser, JoinTeam, UpdateTeam, QuitTeam, RemoveTeam} from "../../services/api.ts";
import {showFailToast, showSuccessToast, showToast} from "vant";
import {useRouter} from "vue-router";

interface teamCardListProps {
  teamList: API.TeamSearchResponse[]
}
const router = useRouter()
const showKeyboard = ref(false)
const password = ref('')
const currentTeam = ref({})
const correctPassword = ref('')
const user: API.User = ref({})
const getCurrentUser = async () => {
  const res = await currentUser()
  user.value = res.data;
}
onMounted(async () => {
  await getCurrentUser()
})

const prop = withDefaults(defineProps<teamCardListProps>(), {
  teamList: []
})
//预处理加入队伍前的状态(是否为密码房间)
const preJoinTeam = async (team) => {
  currentTeam.value = team
  // console.log(team)
  if (team.status === "SECRET") {
    showKeyboard.value = true
    correctPassword.value = team.password
  } else {
    await joinTeam(team)
  }
}

watch(password, async (val: string) => {
  showToast('12323131')
  if (val.length === 4 && val === correctPassword.value) {
    await joinTeam(currentTeam.value)
    password.value = ''
    showKeyboard.value = false
  } else if (val.length === 4 && val !== correctPassword.value) {
    showFailToast("密码错误")
    password.value = ''
  }
})

const joinTeam = async (team) => {

  if (team.status === "SECRET") {
    const res = await JoinTeam({
      password: password.value,
      id: team.id
    })
    if (res.code == 0) {
      showSuccessToast("加入成功")
    } else {
      showFailToast(res.description)
    }
  } else {
    const res = await JoinTeam({
      id: team.id
    })
    if (res.code == 0) {
      showSuccessToast("加入成功")
    } else {
      showFailToast(res.description)
    }
  }
  currentTeam.value = {}
  window.location.reload()

}
const doUpdateTeam = async (team) => {

  router.push(`/team/update/${team.id}`)
}
const quitTeam = async (team) => {
  const res = await QuitTeam({
    teamId: team.id
  })
  if (res.code == 0) {
    showSuccessToast("退出成功")
    window.location.reload()
  } else {
    showFailToast(res.description)
  }
}
const removeTeam = async (team) => {
  console.log(team)
  const res = await RemoveTeam({
    teamId: team.id
  })
  if (res.code == 0) {
    showSuccessToast("解散成功")
    window.location.reload()
  } else {
    showFailToast(res.description)
  }
}

</script>

<style scoped>

</style>